<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="<c:url value='/css/bootstrap.min.css'/>" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
    <link href="<c:url value='/css/bootstrap-responsive.min.css'/>" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.bootcss.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">CDSF</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span2">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">设计模式组件</li>
              <c:forEach items="${designPatternList}" var="dp">
              	<li>
              		<a href="<%=request.getContextPath()%>/component/design_pattern_component/${dp.symbal}">
              			<c:out value="${dp.name}"/>
              		</a>
              	</li>
              </c:forEach>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span10">
			<div class="row-fluid">
				<div class="span10">
					<h2 id="design_pattern_name"><c:out value="${designPatternName}" />组件</h2>
				</div>
				<div class="span10">
					<button class="btn btn-primary" data-target="#design_pattern_component_panel" data-toggle="modal"
					id="add_design_pattern_component">增加</button>
					<p />
					<table class="table table-bordered" >
						<thead>
							<tr>
								<th>名称</th>
								<th>创建时间</th>
								<th>创建者</th>
								<th>描述</th>
								<th>路径</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${designPatternComponentList}" var="dpc">
							<tr>
								<td><c:out value="${dpc.instance.name}"/></td>
								<td><c:out value="${dpc.createTime}" /></td>
								<td><c:out value="${dpc.owner.username}" /></td>
								<td><c:out value="${dpc.description}" /></td>
								<td><c:out value="${dpc.xmlPath}" /></td>
								<td>
									<div class="btn-group">
										<a class="btn btn-info" name="" href="<%=request.getContextPath()%>/${dpc.uri.replace(':','/')}">编辑</a>
										<a class="btn btn-warning" name="">删除</a>
										<input type="hidden" name="design_pattern_component" value=""/>
									</div>
								</td>
							</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>

        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; SJTU 2013</p>
      </footer>

    </div><!--/.fluid-container-->
    
    <div class="modal hide fade" id="design_pattern_component_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>添加设计模式组件</h3>
		</div>
		<form class="form-horizontal"  action="<%=request.getContextPath()%>/component/design_pattern_component/add" method="post">
		<div class="modal-body">

			 <div class="control-group">
    			<label class="control-label" for="name">组件名称</label>
    			<div class="controls">
      				<input type="text" name="name" placeholder="组件名称">
    			</div>
 			 </div>
 			 <div class="control-group">
    			<label class="control-label" for="componentType">组件类型</label>
    			<div class="controls">
      				<span class="uneditable-input">
      					<c:out value="${designPatternName}"></c:out>
      				</span>
      				<input type="hidden" name="designPatternUri" value="${designPatternUri}" />
    			</div>
 			 </div>
 			 <div class="control-group">
    			<label class="control-label" for="description">描述</label>
    			<div class="controls">
      				<textarea rows="2" name="description" placeholder="描述组件的作用..." ></textarea>
    			</div>
 			 </div>
 			 <div class="control-group">
    			<label class="control-label" for="xmlPath">配置文件名称</label>
    			<div class="controls">
      				<input type="text" name="xmlPath" placeholder="组件配置文件名称">
      				<span class="help-block">请输入英文的文件名称</span>
    			</div>
 			 </div>
 			 
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary" type="submit" id="save_design_pattern_component" >保存</button>	
			<button class="btn" type="reset" data-dismiss="modal" aria-hidden="true">取消</button>
		</div>
		</form>
	</div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<c:url value='/js/jquery.min.js'/>"></script>
    <script src="<c:url value='/js/bootstrap.min.js'/>"></script>
    <script src="<c:url value='/js/design_pattern_component.js'/>"></script>
    
	
  </body>
</html>
